import React from 'react';
import { Collapse, Table, Row, Col, message, Tabs, Button } from 'antd';
import Base from '../../../components/Detail/base';
import ReturnValue from '../../../components/Detail/returnValue';
import { getMoreList } from './option';
import Modal from '../../../../../../components/Modal';
import '../../index.less';

const InterfaceInfo = (props) => {
  const { value, interfaceType, isVersion } = props;

  const getThirdColumns = (interfaceType) => [
    {
      dataIndex: 'orderOrWeight',
      title: interfaceType ? '调用顺序' : '调用权重',
    },
    {
      dataIndex: 'supplierName',
      title: '供应商名称',
    },
    {
      dataIndex: 'name',
      title: '数据源接口名',
    },
  ];

  const getEnterColumns = () => [
    {
      dataIndex: 'name',
      title: '参数名',
    },
    {
      dataIndex: 'positionLabel',
      title: '参数位置',
    },
    {
      dataIndex: 'typeLabel',
      title: '类型',
    },
    {
      dataIndex: 'nonEmptyLabel',
      title: '必填',
    },
    {
      dataIndex: 'desc',
      title: '描述',
    },
    {
      dataIndex: 'thirdParamList.name',
      title: '对应参数名',
      render: (_, { thirdParamList }) =>
        thirdParamList && thirdParamList.map((item, index) => <p key={index}>{item.name}</p>),
    },
    {
      dataIndex: 'thirdParamList.positionLabel',
      title: '对应参数位置',
      render: (_, { thirdParamList }) =>
        thirdParamList && thirdParamList.map((item, index) => <p key={index}>{item.positionLabel}</p>),
    },
    {
      dataIndex: 'thirdParamList.typeLabel',
      title: '对应参数位置',
      render: (_, { thirdParamList }) =>
        thirdParamList && thirdParamList.map((item, index) => <p key={index}>{item.typeLabel}</p>),
    },
    {
      dataIndex: 'action',
      title: '操作',
      render: (_, record) => (
        <Button type='text' onClick={() => handleMore(record)}>
          更多
        </Button>
      ),
    },
  ];

  const handleMore = (record) => {
    const moreList = getMoreList(record);
    Modal.open({
      title: '更多',
      width: '500px',
      content: (
        <Row>
          {moreList.map(({ label, value }) => (
            <Col key={label} span={24} style={{ marginBottom: '20px' }}>
              <Row>
                <Col span={6}>{label}</Col>
                <Col span={18} style={{ color: 'rgba(114,123,141,1)' }}>
                  {value || '-'}
                </Col>
              </Row>
            </Col>
          ))}
        </Row>
      ),
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  const getMapColumns = () => [
    {
      title: '供应商',
      dataIndex: 'thirdInterfaceList.thirdInterfaceId',
      render: (_, { thirdInterfaceList }) =>
        thirdInterfaceList &&
        thirdInterfaceList.map((item, index) => (
          <p key={index}>{value.interfaceMap[item.thirdInterfaceId] && value.interfaceMap[item.thirdInterfaceId][1]}</p>
        )),
    },
    {
      title: '数据源接口',
      dataIndex: 'thirdInterfaceList.thirdInterfaceName',
      render: (_, { thirdInterfaceList }) =>
        thirdInterfaceList &&
        thirdInterfaceList.map((item, index) => (
          <p key={index}>{value.interfaceMap[item.thirdInterfaceId] && value.interfaceMap[item.thirdInterfaceId][0]}</p>
        )),
    },
    {
      title: '源key',
      dataIndex: 'thirdPath',
      render: (_, { thirdInterfaceList }) =>
        thirdInterfaceList && thirdInterfaceList.map((item, index) => <p key={index}>{item.thirdPath}</p>),
    },
    {
      title: '映射key',
      dataIndex: 'innerPath',
    },
    {
      title: '数据类型',
      dataIndex: 'typeLabel',
    },
    {
      title: '返回key(是否)',
      dataIndex: 'isReturningLabel',
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (_, record) => (
        <Button type='text' onClick={() => handleMap(record, value.codeMaps)}>
          码值映射
        </Button>
      ),
    },
  ];

  const getCodeColumns = () => [
    {
      title: '数据源接口',
      dataIndex: 'interfaceName',
      render: (_, { thirdInterfaceId }) => <span>{value.interfaceMap[thirdInterfaceId][0]}</span>,
    },
    {
      title: '源key',
      dataIndex: 'srcKey',
    },
    {
      title: '码值',
      dataIndex: 'srcCode',
    },
    {
      title: '映射key',
      dataIndex: 'destKey',
    },
    {
      title: '码值',
      dataIndex: 'destCode',
    },
    {
      title: '描述',
      dataIndex: 'destDesc',
    },
  ];

  const handleMap = ({ thirdPath }, codeMaps) => {
    const mapData = codeMaps.filter((item) => item.srcKey === thirdPath);
    if (!mapData.length) return message.warning('没有码值映射');
    Modal.open({
      title: '码值映射',
      width: '500px',
      content: <Table rowKey='id' columns={getCodeColumns()} dataSource={mapData} pagination={false} />,
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  const getCostColumns = () => [
    {
      title: '数据源接口',
      dataIndex: '',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList && thirdFeeRuleList.map(({ interfaceId }) => value.interfaceMap[interfaceId][0]),
    },
    {
      title: '数据源计费参数名s',
      render: (_, { thirdFeeRuleList }) => thirdFeeRuleList && thirdFeeRuleList.map(({ name }) => name),
    },
    {
      title: '码值',
      render: (_, { thirdFeeRuleList }) => thirdFeeRuleList && thirdFeeRuleList.map(({ code }) => code),
    },
    {
      title: '计费类型',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList && thirdFeeRuleList.map(({ feeRuleTypeLabel }) => feeRuleTypeLabel),
    },
    {
      prop: 'name',
      title: '接口计费参数名',
    },
    {
      prop: 'code',
      title: '码值',
    },
    {
      prop: 'feeRuleTypeLabel',
      title: '计费类型',
    },
  ];

  const getConstantColumns = () => [
    {
      title: '数据源参数名',
      dataIndex: 'name',
    },
    {
      title: '数据源参数位置',
      dataIndex: 'positionLabel',
    },
    {
      title: '类型',
      dataIndex: 'typeLabel',
    },
    {
      title: '参数值',
      dataIndex: 'val',
    },
  ];

  const renderInterfaceNode = () => [
    {
      title: '基础配置',
      component: <Base value={value} />,
    },
    {
      title: '入参定义',
      component: (
        <Table
          rowKey='id'
          columns={getThirdColumns(interfaceType)}
          dataSource={value.thirdInterfaceList}
          pagination={false}
        />
      ),
    },
    {
      title: '入参定义',
      component: <Table rowKey='id' columns={getEnterColumns()} dataSource={value.params} pagination={false} />,
    },
    {
      title: '接口返回结果',
      component: <ReturnValue value={value} />,
    },
    {
      title: '返回参数定义-映射',
      component: <Table rowKey='id' columns={getMapColumns()} dataSource={value.returningMaps} pagination={false} />,
    },
    {
      title: '计费配置',
      component: <Table rowKey='id' columns={getCostColumns()} dataSource={value.feeRules} pagination={false} />,
    },
    {
      title: '常量参数',
      component: value.tabList && (
        <Tabs>
          {value.tabList.map(({ name, tparams }, index) => (
            <Tabs.TabPane key={index.toString()} tab={name}>
              <Table dataSource={tparams} columns={getConstantColumns()} rowkey='id' pagination={false} />
            </Tabs.TabPane>
          ))}
        </Tabs>
      ),
    },
  ];

  const handleEdit = () => {
    const url = interfaceType
      ? `/dataGateway/mainSpareInterface/${value.id}/edit`
      : `/dataGateway/shunt/${value.id}/edit`;
    props.history.push(url);
  };

  return (
    <div>
      <Collapse
        className='detail'
        defaultActiveKey={[0, 1, 2, 3, 4, 5, 6]}
        bordered={false}
        expandIconPosition='right'
        ghost={true}
      >
        {renderInterfaceNode().map((item, index) => (
          <Collapse.Panel header={item.title} key={index}>
            {item.component}
          </Collapse.Panel>
        ))}
      </Collapse>
      {!isVersion && (
        <Row type='flex' justify='start' align='middle' className='operate_button'>
          <Button type='primary' onClick={handleEdit} disabled={value.status} style={{ marginRight: '20px' }}>
            编辑
          </Button>
          {!!value.status && <span>发布状态，无法编辑</span>}
        </Row>
      )}
    </div>
  );
};
export default InterfaceInfo;
